<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<!-- START Metadata -->
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="KroketWeb levert Raspatat, kroketten, patat en vele meer producten. Bestel nu bij KroketWeb!" />
<meta name="keywords" content="kroketweb, kroket, patat, raspatat, frikandellen, snacks, webshop, cafetaria, snackbar" />
<meta name="robots" content="index, follow" />
<!-- END Metadata -->

<title>Welkom bij KroketWeb - Bestel je vette hap online</title>

<!-- START CSS -->
<link type="text/css" href="css/style.css" rel="stylesheet" />
<!-- END CSS -->

<!-- START Script -->
<script type="text/javascript" src="js/functions.js"></script>
<!-- END Script -->

<%@ page import="java.sql.*"%>
<%@ page import="java.util.HashMap" %>
<%@ page import="java.util.Map.*" %>
<%@ page import="java.util.*"%>
<%@ page import="java.lang.Object"%>
</head>

<body onload="calculateTotalCart();">
<div id="header"></div>
<div id="menu">
	<h2>Menu</h2>
	<ul>
		<li><a href="index.html">Home</a></li>
		<li><a href="products.html">Assortiment</a></li>
		<li><a href="search.html">Zoek</a></li>
		<li><a href="cashout.html">Afrekenen</a></li>
	</ul>
</div>

<div id="content">
<h1>Overzicht producten</h1>

<table id="products">
	<thead>
		<tr>
			<th onclick="sortList('name', 1, 15);" class="cursorPointer">Product</th>
			<th onclick="sortList('price', 1, 15);" class="cursorPointer">Prijs(Euro)</th>
			<th onclick="sortList('stock', 1, 15);" class="cursorPointer">Op voorraad</th>
			<th></th>
		</tr>
	</thead>

	<tbody>
		<c:forEach var="p" items="${products}" varStatus="rowCounter">
			<c:choose>
				<c:when test="${rowCounter.count % 2 == 1}">
					<c:set var="rowStyle" scope="page" value="odd"/>
					<c:set var="evenRow" scope="page" value="false"/>
				</c:when>
				<c:otherwise>
					<c:set var="rowStyle" scope="page" value="evenRow"/>
					<c:set var="evenRow" scope="page" value="true"/>
				</c:otherwise>
			</c:choose>
			<tr>
				<c:choose>
					<c:when test="${p.stock > 0}">
						<td id="product${p.id}" class="${rowStyle} cursorPointer" onclick="toggleOrderAmountField(${p.id}, ${evenRow});">${p.name}</td>		
						<td id="price${p.id}" class="${rowStyle} cursorPointer" onclick="toggleOrderAmountField(${p.id}, ${evenRow});">&euro; ${p.price}</td>
						<td class="available cursorPointer" onclick="toggleOrderAmountField(${p.id}, ${evenRow});">Ja</td>
					</c:when>
					<c:otherwise>
						<td class="${rowStyle}">${p.name}</td>		
						<td class="${rowStyle}">&euro; ${p.price}</td>
						<td class="unavailable">Nee</td>
					</c:otherwise>
				</c:choose>	
				
				<td id="amountField${p.id}"></td>
			</tr>
		</c:forEach>
		<tr>
			<td>Producten per pagina</td>
			<td>
				<select onchange="sortList('name', 1, null);" id="pppSelector">
					<option value="5">5</option>
					<option value="10">10</option>
					<option value="15" selected="selected">15</option>
				</select>
			</td>
			<td>
				<c:forEach var="i" begin="1" end="${totalPages}" step="1">
					<a onclick="sortList('name', ${i}, 15);" class="pagination">${i}</a>&nbsp;
				</c:forEach>
				<c:if test="${totalPages > 1}">
					<a onclick="sortList('name', 2, 15);" class="pagination">&raquo;</a>
				</c:if>
			</td>
		</tr>
	</tbody>
</table>
</div>
<div id="sponsors">
	<h2>Sponsors</h2>
	<ul>
		<li><a href="#">Lemia: Vool de lekkelste flietsaus</a></li>
		<li><a href="#">Mola snacks: eerlijk en lekker</a></li>
		<li><a href="#">Sonya Backer: Snacken is gezond</a></li>
	</ul>
</div>
<div id="shoppingCart">
	<h2>Inhoud winkelmandje</h2>
	<table>
				<thead>
					<tr>
						<th>Product</th>
						<th>Prijs</th>
						<th></th>
					</tr>
				</thead>
	
				<tbody id="shoppingCartContent">
					<c:forEach var="product" items="${shoppingCartProducts}">
						<tr>
							<td>(${product.amount}x)${product.name}</td>
							<td class="itemPrice">${product.totalPrice}</td>
							<td><a href="#" onclick="removeItem(${product.id});">X</a></td>
						</tr>
					</c:forEach>
				</tbody>
	
				<tfoot>
					<tr>
						<td>Totaal</td>
						<td id="totalPriceCart">0,00</td>
					</tr>
				</tfoot>
	</table>
</div>
<div class="clearFix"></div>
</body>
</html>